<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
<my-component>
<h1 slot="header">这是标题</h1>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p slot="footer">联系信息</p>
</my-component>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.component('my-component',{
	    template:`
	<div class="container">
	<header>
	<slot name="header"></slot>
	</header>
	<div class="main">
	<slot></slot>
	</div>
	<footer>
	<slot name="footer"></slot>
	</footer>
	<div>
	`,
	})
	new Vue({
	    el:'#app'
	})
</script>


	</body>
</html>
